<template>
<div class="frienddetaillayout">
  <!-- 列表栏 -->
            <div class="friendlist">
                <div class="friendsearch">
                    <div class="searchinput">
                      <el-input v-model="keyword" placeholder="输入搜索信息"/>  
                    </div>
                    <div class="searchbutton">
                        <el-button  @click="friendSearch" icon="el-icon-s-custom"></el-button>
                        <el-button  @click="groupSearch" icon="el-icon-s-grid"></el-button>                        
                    </div>
                </div> 

                <div class="friendlists">
                    <ul class="friendlistsul">   
                        <li class="friendlistli" v-for="i of showList" :key="i.id">                    
                                <div class="friendavaname" @click="getFriendDetail(i.email,i.id)">
                                    <div class="friendavatar">
                                        <el-avatar :src="i.imgurl"></el-avatar>
                                        <div class="friendname">
                                            <span>{{i.name}}</span>
                                        </div> 
                                    </div>  
                                    <div class="friendtime">
                                        <span>{{dateformate(i.time)}}</span>
                                    </div>  
                                </div>                 
                        </li>
                    </ul>
                </div>
            </div>

  <div class="friendcontent" v-if="this.isGroup==false">
      <div class="frienduserdetailout">
              <div class="frienduserdetail">
                    <div class="frienddetailavatar">
                        <img :src="detailData.imgurl">
                    </div>

                    <div :class="this.color">
                    <span>{{detailData.name}} <el-button :type="this.type" :icon="this.male" circle></el-button></span>
                    </div>  

                    <div class="friendexplain">
                    <p>{{detailData.explain}}</p>
                    </div>

                    <div class="frienddetailmail">
                        <span>邮箱：{{detailData.email}}</span>
                    </div>

                    <div class="frienddetailtime">
                        <span>生日：{{this.dateformatedetail(detailData.birth)}}</span>
                        <span>注册时间：{{this.dateformatedetail(detailData.time)}}</span>
                    </div>

                    <div class="frienddetailbutton"> 
                        
                        <div v-if="friendState===1" class="agreeapply">
                            <el-button  type="success"  @click="dialogVisible1 = true">同意申请</el-button>
                        </div>

                        <div v-if="friendState===1" class="refuseapply">
                            <el-button  type="danger" @click="deleteFriend">拒绝申请</el-button>
                        </div>
                        <div v-if="friendState===0" class="sendmessage">
                             <el-button type="primary" @click="toFriendMessageList">发送信息</el-button>
                        </div> 

                        <div v-if="friendState===0" class="deletefriend">
                            <el-button type="danger" @click="deleteFriend">删除好友</el-button>
                        </div> 

                       <div v-if="friendState===3" class="addfriend">
                           <el-button type="warning"  @click="dialogVisible = true">添加好友</el-button>
                       </div>
                       
                       <div v-if="friendState==2" class="friendState2">等待对方同意好友申请</div>
                       
                       <div v-if="friendState===4"> </div>
                         
                    </div>
                    <!-- 弹出添加好友对话框 -->
                    <el-dialog
                        title="添加好友"
                        :visible.sync="dialogVisible"
                        width="40%">
                        <div class="margintopandbottom">
                            <el-input v-model="nickName" placeholder="设置好友昵称"></el-input>
                        </div>
                        
                        <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="申请信息"
                            v-model="applyMessage">
                        </el-input>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="success" @click="applyFriend">发送申请</el-button>
                        </span>
                    </el-dialog>
                   <!-- 弹出同意申请时设置昵称的对话框 -->
                    <el-dialog
                        title="设置好友昵称"
                        :visible.sync="dialogVisible1"
                        width="30%">
                        <el-input v-model="nickName" placeholder="设置好友昵称"></el-input>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="updateFriendState">确 定</el-button>
                        </span>
                    </el-dialog>
            </div> 
        </div>      
     </div>

     <div class="groupcontent" v-else-if="this.isGroup==true">
      <div class="groupdetaillayout">
          <div class="groupdetail">
              <!-- 左侧群信息 -->
              <div class="groupmessage">
                  <div class="groupavatar">
                      <img :src="groupDetail.imgurl">
                  </div>
                  <div class="groupnametime">
                      <span>群ID：{{groupDetail.id}}</span>
                      <span>群名：{{groupDetail.name}}</span>
                      <span>群主：{{groupDetail.lordName}}</span>
                      <span>创建时间：{{dateformatedetail(groupDetail.time)}}</span>
                  </div>
                  <div class="groupnotice">
                      <p>群公告：{{groupDetail.notice}}</p>
                  </div>
                  <div class="groupdetailbutton">
                        <div v-if="groupState===7" class="groupsend">
                             <el-button type="primary" @click="toGroupMessageList">发送信息</el-button>
                        </div> 

                        <div v-if="groupState===7"  class="deletegroup">
                            <el-button @click="deleteGroup" type="danger">退出群聊</el-button>
                        </div> 
                       
                        <div v-else-if="groupState===8" class="groupapply">
                            <el-button @click="groupDialogVisible = true"  type="success">加入群聊</el-button>
                        </div>
                        <el-dialog
                            title="加入群聊"
                            :visible.sync="groupDialogVisible"
                            width="30%"
                            >
                            <el-input v-model="applyGroupName" placeholder="给自己在群里起个名字吧"></el-input>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="groupDialogVisible = false">取 消</el-button>
                                <el-button type="success" @click="applyGroup">加入群聊</el-button>
                            </span>
                            </el-dialog>
                    </div>
              </div>
              <!-- 右侧群成员列表 -->
              <div class="groupmemberslist">
                    <div class="groupmemberlistheader">
                        <span>群成员列表（{{groupMemberNumbers}}）</span>
                    </div> 

                    <div class="groupmemberslists">
                        <ul class="groupmemberslistsul">   
                            <li class="groupmemberslistli" v-for="i of groupMembers" :key="i.id">                    
                                    <div class="groupmembersavaname">
                                        <div class="groupmembersavatar">
                                            <el-avatar :src="i.imgurl"></el-avatar>
                                            <div class="groupmembersname">
                                                <span>{{i.name}}</span>
                                            </div> 
                                        </div>  
                                        <div class="groupmemberstime">
                                            <span>{{dateformatedetail(i.time)}}</span>
                                        </div>  
                                    </div>                 
                            </li>
                        </ul>
                    </div>
              </div>
              </div>
          </div>
     </div>
</div>
  
  
</template>

<script>
import request from "../utils/request";
export default{
    data(){
        return{
            detailData:{ //好友详情信息
                id:"",
                name:"",
                sex:"",
                birth:"",
                explain:"",
                imgurl:"",
                email:"",
                time:""
            },

            groupDetail:{  //群聊详情信息
                id:"",
                name:"",
                notice:"",
                imgurl:"",
                time:"",
                lordName:""
            },

            male:"",  //区分男女标志
            type:"",  //区分男女按键颜色
            color:"",  //区分男女用户名字体颜色
            showList:"",  //展示列表
            keyword:"",    //搜索关键词
            friendState:"",  //好友状态
            isGroup:false,   //区分是用户还是群聊
            groupState:"",   //群聊状态
            groupMembers:"",  //群成员列表
            dialogVisible: false,  //控制弹出好友申请对话框
            groupDialogVisible:false, //控制弹出加群对话框
            applyMessage:"",  //好友申请信息
            applyGroupName:"", //加入群聊时所起的名字
            nickName:"",  //好友昵称
            dialogVisible1:false,//控制弹出同意申请设置昵称对话框
            groupMemberNumbers:"",//群成员数量
           // friendList:"", 
           // searchList:"", 
        }
    },

    created(){
        this.getUserDetail()//进入时展示本用户信息
        this.firstFriendSearch();
    },

    methods:{
        //区分用户男女和群聊分别获取用户/群聊信息
        getFriendDetail(email,id){
        request.get(`/friend/friendDetail/${id}`).then((res)=>{
            if(email){
                this.isGroup=false;
                this.detailData.name=res.data.friendDetail.name;
                this.detailData.sex=res.data.friendDetail.sex;
                this.detailData.birth=res.data.friendDetail.birth;
                this.detailData.explain=res.data.friendDetail.explain;
                this.detailData.imgurl=res.data.friendDetail.imgurl;
                this.detailData.email=res.data.friendDetail.email;
                this.detailData.time=res.data.friendDetail.time;
                this.detailData.id=res.data.friendDetail.id;
                if(res.data.friendDetail.sex=="男"){
                        this.male="el-icon-male";
                        this.type="primary";
                        this.color="frienddetailname1"

                }else if(res.data.friendDetail.sex=="女"){
                        this.male="el-icon-female";
                        this.type="danger";
                        this.color="frienddetailname2"
                }

                let cookieString=this.getCookie("userid");
                let userid=parseInt(cookieString);
                if(userid!=res.data.friendDetail.id){
                    this.friendState=res.data.friendState.state;   
                }else if(userid==res.data.friendDetail.id){
                    this.friendState=4
                }
                 
            }else{
                console.log(res.data.friendDetail.code);
                this.isGroup=true;
                this.getGroupDetail(id);
            }
        })
        },
        
        //获取cookie
        getCookie(cname){        
            var name = cname + "=";        
            var ca = document.cookie.split(';');        
            for(var i=0; i<ca.length; i++){        
                var c = ca[i].trim();        
                if(c.indexOf(name)==0) return c.substring(name.length,c.length);        
            }        
            return "";        
        },
        

        //获取群聊详情信息
        getGroupDetail(id){
        this.groupDetail.id=id;  
        request.get(`/group/groupDetail/${id}`).then((res)=>{
            this.groupDetail.name=res.data.detailData.name;
            this.groupDetail.notice=res.data.detailData.notice;
            this.groupDetail.imgurl=res.data.detailData.imgurl;
            this.groupDetail.time=res.data.detailData.time
             //查找群主信息
            this.getLordDetail(res.data.detailData.user_id);
            this.getGroupMembers(id);
            this.groupState=res.data.groupState.state;
        })
        },

        //查找用户信息（群主信息）
        getLordDetail(id){
            request.get(`/user/detail/${id}`).then((res)=>{
                this.groupDetail.lordName=res.data.name;
            })
        },

        //查找群成员列表
        getGroupMembers(id){
            request.get(`/group/groupMembers/${id}`).then((res)=>{
                this.groupMembers=res.data;
                this.groupMemberNumbers=res.data.length;
            })
        },
        
        //添加好友
        applyFriend(){
           request.post('/friend/applyFriend',{friend_id:this.detailData.id,msg:this.applyMessage,nickName:this.nickName}).then((res)=>{
               window.alert(res.data);
               this.getFriendDetail(this.detailData.email,this.detailData.id);
               this.dialogVisible=false;
           })
        },
        
        //同意好友申请（即更新好友状态）
        updateFriendState(){
            request.post('friend/updateFriendState',{friend_id:this.detailData.id,nickName:this.nickName}).then((res)=>{
                window.alert(res.data);
                this.dialogVisible1=false;
                this.getFriendDetail(this.detailData.email,this.detailData.id);
            })
        },

        //删除好友
        deleteFriend(){
            let r=confirm("确定解除好友关系吗？");
            if(r==true){
               request.post('/friend/deleteFriend',{friend_id:this.detailData.id}).then((res)=>{
                window.alert(res.data);
                this.getFriendDetail(this.detailData.email,this.detailData.id);
            }) 
            } 
        },

        //退群
        deleteGroup(){
            let r=confirm("确定退出该群聊吗？");
            if(r==true){
               request.get(`/group/deleteGroup/${this.groupDetail.id}`).then((res)=>{
                window.alert(res.data);
                this.getGroupDetail(this.groupDetail.id);
                this.getGroupList();
               }) 
            }
            
        },

        //加入群聊
        applyGroup(){
            request.post('/group/applyGroup',{group_id:this.groupDetail.id,name:this.applyGroupName}).then((res)=>{
                window.alert(res.data);
                this.groupDialogVisible=false;
                this.getGroupDetail(this.groupDetail.id);
                this.getGroupList();
            })
        },

        //加载页面时获取本用户的信息
        getUserDetail(){
        request.get('/user/detail').then((res)=>{
            this.detailData.name=res.data.name;
            this.detailData.sex=res.data.sex;
            this.detailData.birth=res.data.birth;
            this.detailData.explain=res.data.explain;
            this.detailData.imgurl=res.data.imgurl;
            this.detailData.email=res.data.email;
            this.detailData.time=res.data.time;
            this.detailData.id=res.data.id;
            if(res.data.sex=="男"){
                this.male="el-icon-male";
                this.type="primary";
                this.color="userdetailname1"

            }else{
                this.male="el-icon-female";
                this.type="danger";
                this.color="userdetailname2"
            }
        })
        },

        //转换详情信息时间格式（年-月-日）
        dateformatedetail(time) {
            let date = new Date(time);
            let year = date.getFullYear();
            let month = date.getMonth()+1;
            let day = date.getDate();
            let result = `${year}-${month}-${day}`;
            return result
        },
        
        //修改时间格式（年-月-日 时-分）
        dateformate(time) {
            let date = new Date(time);
            let year = date.getFullYear();
            let month = date.getMonth()+1;
            let day = date.getDate();
            let hour = date.getHours();
            let minutes = date.getMinutes();
            let result = `${year}-${month}-${day} ${hour}:${minutes}`;
            return result
        },
        
        //进入搜索界面时执行搜索用户
        firstFriendSearch(){
            // if(this.keyword!=null){
               request.post('/user/search',{keyword:this.keyword}).then((res)=>{
                //    console.log(res.data);
                    this.showList=res.data;
                    // this.getFriendDetail(res.data[0].email,res.data[0].id);
                }) 
            // }    
        },
        //好友关键词（用户名/邮箱账号）搜索
        friendSearch(){
            // if(this.keyword!=null){
               request.post('/user/search',{keyword:this.keyword}).then((res)=>{
                //console.log(res.data);
                    this.showList=res.data;
                    this.getFriendDetail(res.data[0].email,res.data[0].id);
                }) 
            // }    
        },
        //群聊关键词（群名/群ID）搜索
        groupSearch(){
            request.post('/group/search',{keyword:this.keyword}).then((res)=>{
                    this.showList=res.data;  
                    this.getFriendDetail(res.data[0].email,res.data[0].id);
            }) 
        },

        //发送信息
        toFriendMessageList(){
            request.get(`/toFriendMessageList/${this.detailData.id}`).then((res)=>{
                if(res.data){
                     this.$router.push('/messageList')
                } 
            })
        },

         //发送信息
        toGroupMessageList(){
            request.get(`/toGroupMessageList/${this.groupDetail.id}`).then((res)=>{
                if(res.data){
                      this.$router.push('/messageList')   
                }
            })
        }

    }
}
</script>

<style scoped>

* {
    box-sizing:border-box
}
.frienddetaillayout{
width:100%;
height:100%;
background-color:#2c3e50; 
border-radius: 0px 40px 40px 0px;
display: flex;
justify-content:space-between;
}

.friendlist{
    height:100%;
    width:40%;
    padding:15px;
    padding-left:20px;
    background-color: #2c3e50;
}
.friendsearch{
    display: flex;
    justify-content:center;
    background-color: #70b2f5;
    padding-bottom: 5px;
    padding-top:5px;
    border-radius: 5px 5px 0px 0px;
}
.searchinput{
    width:67%;
    padding-left:5px;
}
.searchbutton{
    width:33%;
    padding-left:10px;
    padding-right:5px;
    display: flex;
    justify-content: space-around;
}
 .friendlists{
     background-color: white;
     height:91%;
     overflow:auto;
     border-radius: 0px 0px 5px 5px;
     width:100%;
 }

 /* 设置滚动条的样式 */
::-webkit-scrollbar {
width:1px;
}

.friendcontent{
    height:100%;
    width:60%;
}
/* 列表列表样式 */
.friendlistli{
height:60px;
width:100%;
display: flex;
justify-content:space-between;
border-bottom:1px solid rgb(239, 241, 242)
}

.friendlistli:hover{
    background-color: rgb(203, 225, 244);
}

 .friendavaname{
    height:100%;
    display: flex;
    justify-content:space-between;
    width:100%;
}
.friendavatar{
   height:100%;
   /* display: grid;
   place-items: center; */
   display: flex;
   justify-content:flex-start;
   padding:10px
}
.friendname{
    height:100%;
    display: grid;
   place-items: center;
   color:#4c6986;
   padding:10px;
}
.friendname span{
    font-size: 15px;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.friendtime{
    height:100%;
    display: grid;
   place-items: center;
   padding:10px;
   font-size: 12px;
   color: #56789a;
}  



.frienduserdetailout{
    padding:20px;
    padding-left:5px;
    background-color: #2c3e50;
    height:100%;
    width:100%;
    border-radius: 0px 20px 20px 0px;
} 
.frienduserdetail{
    padding:30px;
    /* background-color: #052f4a; */
    background-image: url("/img/2051855.jpg");
    background-size: cover;
    height:100%;
    width:100%;
    display: grid;
    place-items: center;
    border-radius: 5px 10px 10px 5px;
    color:rgb(244, 245, 248);
    font-size: 19px;
}
.frienddetailavatar{
    height:130px;
    width:130px;
    border-radius: 50%;
    background-color:rgb(212, 222, 237);
    overflow: hidden;
    border: 3px solid rgb(214, 224, 235);
}
.frienddetailavatar img{
    height:130px;
    width:130px;
}
.friendexplain{
    width:70%;
    display: grid;
    place-items: center;
}
.friendexplain p{
    line-height: 2;
    font-size: 18px;
}

.frienddetailname1{
    font-size: 25px;
    color:rgb(9, 151, 246);
}
.frienddetailname2{
    font-size: 25px;
    color:rgb(247, 131, 131);
}
.frienddetailtime{
    width: 70%;
    display: flex;
    justify-content:space-around;
}
.frienddetailtime span{
    display: block;
}
.frienddetailbutton{
    display: flex;
    justify-content:space-around;
}
.sendmessage,.addfriend,.refuseapply,.deletefriend,.agreeapply{
    margin-left:20px;
    margin-right:20px;
}


/*群右侧详情界面的样式*/ 
.groupcontent{
    height:100%;
    width:60%;
}
.groupdetaillayout{
    padding:20px;
    padding-left:5px;
    background-color: #2c3e50;
    height:100%;
    width:100%;
    border-radius: 0px 20px 20px 0px;
    display: grid;
    place-items: center;
}
.groupdetail{
    /* padding:30px; */
    /* background-color: rgb(178, 193, 208); */
    background-image: url("/img/2051855.jpg");
    background-size: cover;
    height:100%;
    width:100%;
    border-radius: 5px 10px 10px 5px;
    color:rgb(247, 249, 252);
    display: flex;
    justify-content:space-between;
}
.groupmessage{
    height:100%;
    width:60%;
    color:aliceblue;
    padding: 20px;
    font-size: 17px;
}
.groupavatar{
    height:130px;
    width:130px;
    border-radius: 50%;
    background-color:rgb(212, 222, 237);
    overflow: hidden;
    border: 3px solid rgb(214, 224, 235);
}
.groupavatar img{
    height:130px;
    width:130px;
}
.groupnametime{
 margin-top:20px;
}
.groupnametime span{
    display: block;
    margin: 5px;
}

.groupnotice{
    margin-top:30px;
}
.groupmemberslist{
    height: 100%;
    width: 40%;
    background-color: #687480;
    border-radius: 5px;
}
.groupmemberlistheader{
    color: rgb(237, 241, 244);
    font-size: 15px;
    display: grid;
    place-items: center;
    background-color: #053844;
    padding-bottom: 0px;
    padding-top:5px;
    height:10%;
    border-radius: 0px 5px 0px 0px;
}
.groupmemberslists{
    background-color: #022e38;
     height:90%;
     overflow:auto;
     border-radius: 0px 0px 5px 0px;
     width:100%;
}
.groupmemberslistli{
height:60px;
width:100%;
display: flex;
justify-content:space-between;
border-bottom:1px solid #074350
}
.groupmemberslistli:hover{
    background-color: #074350;
}
.groupmembersavaname{
    height:100%;
    display: flex;
    justify-content:space-between;
    width:100%;
}
.groupmembersavatar{
   height:100%;
   display: flex;
   justify-content:flex-start;
   padding:10px
}
.groupmembersname{
    height:100%;
    display: grid;
   place-items: center;
   color:#cee1f4;
   padding:10px;
}
.groupmembersname span{
    font-size: 14px;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.groupmemberstime{
    height:100%;
    display: grid;
   place-items: center;
   padding:10px;
   font-size: 12px;
   color: #d1e4f6;
}
.groupdetailbutton{
    display: flex;
    justify-content:space-around;
    margin-top:50px;
}
.groupsend,.deletegroup,.groupapply{
    margin-left:20px;
    margin-right:20px;
}

.margintopandbottom{
    margin-top:10px;
    margin-bottom: 10px;
}

.friendState2{
    color:white;
    font-size: 16px;
    padding:12px;
    border-radius: 5px;;
    background-color: rgb(8, 97, 97);
}
</style>